<template>
  <div style="padding-top: 20px;">
    <el-divider content-position="left">钉钉小程序配置</el-divider>
    <el-row :gutter="20">
      <el-col :span="12">
        <el-form ref="myform" :model="formItem" :rules="rules" label-width="100px" size="mini">
          <el-form-item label="应用名称" prop="name">
            <el-input v-model="formItem.name" placeholder="请输入应用名称" />
          </el-form-item>
          <el-form-item label="企业ID" prop="corpId">
            <el-input v-model="formItem.corpId" placeholder="请输入企业ID" />
          </el-form-item>
          <el-form-item label="AgentId" prop="agentId">
            <el-input v-model="formItem.agentId" placeholder="请输入AgentId" />
          </el-form-item>
          <el-form-item label="AppKey" prop="appKey">
            <el-input v-model="formItem.appKey" placeholder="请输入AppKey" />
          </el-form-item>
          <el-form-item label="AppSecret" prop="appSecret">
            <el-input v-model="formItem.appSecret" placeholder="请输入AppSecret" />
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="onSubmit">保存</el-button>
          </el-form-item>
          <el-form-item label="">
            <div class="tip">
              <p>1. 以上参数都是从钉钉开发平台中获取</p>
              <blockquote />
              <p>2. 小程序免密登录接口：</p>
              <blockquote>
                <p>
                  <i>[/auth]/api/w/auth/dingding/login</i>
                </p>
              </blockquote>
              <p>3. 小程序用户绑定接口：</p>
              <blockquote>
                <p>
                  <i>[/auth]/api/w/auth/dingding/bind</i>
                </p>
              </blockquote>
            </div>
          </el-form-item>
        </el-form>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import { create, update, getConfig } from '@neu/auth-ui/api/dingding'

// 定义一个表单原始项
const formItem = {
  id: '',
  name: '',
  corpId: '',
  agentId: '',
  appKey: '',
  appSecret: ''
}

export default {
  name: 'DingDingConfigForm',
  data() {
    return {
      formItem: {
        ...formItem
      },
      // 表单验证规则
      rules: {
        name: [
          { required: true, message: '应用名不能为空', trigger: 'blur' }
        ],
        corpId: [
          { required: true, message: '企业ID不能为空', trigger: 'blur' }
        ],
        agentId: [
          { required: true, message: 'agentId不能为空', trigger: 'blur' }
        ],
        appKey: [
          { required: true, message: 'appKey不能为空', trigger: 'blur' }
        ],
        appSecret: [
          { required: true, message: 'appSecret不能为空', trigger: 'blur' }
        ]
      }
    }
  },
  created() {
    this.fetch()
  },
  methods: {
    // 初始化表单数据
    fetch() {
      getConfig().then(response => {
        this.formItem = {
          ...response.data
        }
      })
    },
    // 保存操作，返回promise，后续处理交由调用者处理
    onSubmit() {
      return new Promise(resolve => {
        this.$refs.myform.validate((valid) => {
          if (valid) {
            if (this.formItem.id) {
              update(this.formItem.id, this.formItem).then(response => {
                this.showResult(response.status === 'success')
              })
            } else {
              create(this.formItem).then(response => {
                this.showResult(response.status === 'success')
              })
            }
          } else {
            resolve(false)
          }
        })
      })
    },
    showResult(isSuccess) {
      this.$message({
        showClose: true,
        message: isSuccess ? '保存成功' : '保存失败',
        type: isSuccess ? 'success' : 'error'
      })
    }
  }
}
</script>

<style>
  .tip {
    padding: 8px 16px;
    background-color: #ecf8ff;
    border-radius: 4px;
    border-left: 5px solid #50bfff;
    margin: 0 0;
  }
</style>
